<template>
    <div class="container">
        <!-- 大屏图片区域start -->
        <div class="imageShow-container">
            <img src="../../assets/ImageShow.png" fit="cover">
        </div>
        <!-- 大屏图片区域end -->


        <div class="page-title">
            <span>选择路线</span>
        </div>

        <div class="select-container">
            <div class="selectCity">
                <div class="title">
                    <span>出发城市</span>
                </div>
                <el-select class="item" v-model="start" size="medium" placeholder="请选择">
                    <el-option
                    v-for="item in citys"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name">
                    </el-option>
                </el-select>
            </div>

            <div class="point-view">
                <img src="../../assets/daoda.png" alt="">
            </div>

            <div class="selectCity">
                <div class="title">
                    <span>目的城市</span>
                </div>
                <el-select class="item" v-model="end" size="medium" placeholder="请选择">
                    <el-option
                    v-for="item in citys"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name">
                    </el-option>
                </el-select>
            </div>
        </div>

        <div class="submit">
            <div class="button">
                <el-button type="primary" @click="toPath" round>查询路线</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getAllCity } from '../../api/travel';
export default {
    name: 'SelectCity',

    data () {
        return {
            citys: [],
            start: '',
            end:'',
            loading:false,
        }
    },

    created () {
        this.getAllCity();
    },

    methods: {
        getAllCity(){ 
            getAllCity().then(res=>{ 
                console.log(res);
                this.citys = res.data;
            })
        },
        toPath(){
            //参数校验
            if(this.start == this.end){
                this.$message({
                    message: '起点与终点不能相同',
                    type: 'warning'
                }); 
                return ;
            }
            
            this.$router.push({ 
                name:'path',
                params:{ 
                    start: this.start,
                    end: this.end
                }
            })

            // let data = { 
            //     start:this.start,
            //     end:this.end
            // }
            // getCityPath(data).then(res=>{ 
            //     console.log("查找路线",res);
            // })
        }
    },
};
</script>

<style lang="less" scoped>
.container{ 
    width: 100%;
    .imageShow-container{ 
        width: 100%;
        height: 12.5rem;
        background-color: rgb(40,44,53);
        img{ 
            width: 100%;
            height: 100%;
        }
    }

    .page-title{ 
        width: 100%;
        height: 5rem;
        text-align: center;
        span{ 
            font-size: 1.375rem;
            line-height: 6.25rem;
            text-align: center;
        }
    }

    // @media screen and (min-width: 0) {
    //     .select-container {
    //         width:100%;
    //     }
    // }

    // @media screen and (min-width: 375px) {
    //     .select-container {
    //         width:100%;
    //     }
    // }

    // @media screen and (min-width: 500px) {
    //     .select-container {
    //         width: 25rem;
    //     }
    // }

    // @media screen and (max-width: 700px) {
    //     .select-container {
    //         width: 90%;
    //     }
    // }

    // @media screen and (min-width: 700px) {
    //     .select-container {
    //        width: 35%;
    //     }
    // }


    .select-container{ 
        width: 34.375rem;
        height: 7.5rem;
        padding: 0px 20px;
        border-radius: 1.875rem;
        border: 1px solid #ebeef5;
        margin: .625rem auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: rgb(248,248,248);
        .selectCity{
            height: 4.375rem; 
            .title{ 
                padding-bottom: .9375rem;
            }
        }
        .point-view{ 
            img{ 
                width: 2.5rem;
                height: 2.5rem;
            }
        }
    }

    .submit{ 
        margin-top: 3.125rem;
        text-align: center;
    }
}
</style>